import React, { Component } from 'react';
import { Button, Modal, Form, Drawer, PageHeader, Divider, Badge } from 'antd';
import '@/assets/css/settings';
import { withPermission } from '../../../components/withpermission';
import moment from 'moment';

import * as echarts from "echarts";
import { withRouter } from 'react-router';
import { getDayByTime, getDayTime } from '../../../utils/action';
const CreateButton = withPermission(Button, 'create')
const { confirm } = Modal

class ReportProductionStatistics_details extends Component {

	componentDidMount() {
		this.initCharts()
	}
	componentDidUpdate() {
		this.initCharts();
	}
	initCharts = () => {
		const { iconSource, searchItem, procedureList } = this.props

		console.log(iconSource, 'iconSource');

		// 数据处理
		let legendData = [], yAxisData = [], data = [], newList = []

		// for (let j in iconSource) {
		// 	let item1 = iconSource[j]
		// 	yAxisData.push(item1.batchNo)
		// 	for (let i in procedureList) {
		// 		let item = procedureList[i]
		// 		let a = legendData.find(e => e == item.procedureName)
		// 		if (!a) {
		// 			legendData.push(item.procedureName)
		// 		}
		// 		let dataO = []
		// 		for (let k in item1.list) {
		// 			let item2 = item1.list[k]
		// 			if (item2.procedureName == item.procedureName) {
		// 				let b = data.findIndex(e => e.procedureName == item.procedureName)
		// 				if (b > -1) {
		// 					data[b].data.push(item2)
		// 				} else {
		// 					dataO.push(item2)
		// 					let obj = {
		// 						procedureName: item.procedureName,
		// 						data: dataO
		// 					}
		// 					data.push(obj)
		// 				}
		// 			}
		// 		}
		// 	}
		// }

		// 获取y轴数据
		for (let j in iconSource) {
			let item1 = iconSource[j]
			yAxisData.push(item1.batchNo)
			newList.push(item1.list)
		}

		for (let i in procedureList) {
			let item = procedureList[i]
			// 获取图例数据
			let a = legendData.find(e => e == item.procedureName)
			if (!a) {
				legendData.push(item.procedureName)
			}
			// 处理图表数据
			let dataO = new Array(yAxisData.length).fill({})
			for (let k in newList) {
				let item2 = newList[k]
				let a = item2.find(e => e.procedureName == item.procedureName)
				if (a) {
					dataO[k] = a
				}
			}
			let obj = {
				procedureName: item.procedureName,
				data: dataO
			}
			data.push(obj)
		}

		// console.log(legendData, 'legendData');
		// console.log(yAxisData, 'yAxisData');
		console.log(data, 'data');

		let seriesData = []
		for (let i in data) {
			let item = data[i]
			let list = []

			for (let j in item.data) {
				let item1 = item.data[j]

				if (item1.batchNo) {
					console.log(item1.batchNo, item1.endTime, item1.startTime, (new Date(item1.endTime).getTime() - new Date(item1.startTime).getTime()));
					list.push(item1.endTime && item1.startTime ? (new Date(item1.endTime).getTime() - new Date(item1.startTime).getTime()) : 0)
				} else {
					list.push(null)
					// list.push(-1)
				}

				// list.push(item1.endTime && item1.startTime ? (new Date(item1.endTime).getTime() - new Date(item1.startTime).getTime()) : 0)
			}
			console.log(list, 'list');

			let obj = {
				name: item.procedureName,
				type: 'bar',
				stack: '工序',
				itemStyle: {
					normal: {
						label: {
							show: true,
							position: 'inside',
							// 标签文本内容
							formatter: (params) => {
								if (params.value < 0) {
									return ''
								}
								return getDayByTime(params.value)
								// return params.value[params.encode.x[0]];
							},
						}
					},
				},
				tooltip: {
					trigger: 'item',
					backgroundColor: '#fff',
					borderColor: '#cdcdcd',
					borderWidth: 1,
					textStyle: { color: '#000' },
					position: function (p) { // 位置回调
						return [p[0] + 10, p[1] - 10];
					},
					// 提示框内容
					formatter: function (params) {
						// console.log(params)
						let seriesIndex = params.seriesIndex
						let dataIndex = params.dataIndex
						let item = data[seriesIndex]?.data[dataIndex]
						// console.log(item, 'item---------');
						var res = ''
						if (item.batchNo) {
							res = `<div style="padding: 5px; font-weight: bold;">
								<p>${item.batchNo} - ${item.procedureName}</p>
								装配班组：${item.groupName ? item.groupName : ''}<br/>
								装配开始：${item.startTime ? item.startTime : ''}<br/>
								装配报工：${item.endTime ? item.endTime : ''}<br/>
								工序用时：${params.value == 0 ? '' : getDayByTime(params.value)}
								</div>`;
						}

						return res
					}
				},
				barMinHeight: 10,
				data: list
			}
			seriesData.push(obj)
		}
		// console.log(seriesData, 'seriesData');



		let myChart = echarts.init(document.getElementById("myChart"));
		let option = {
			// title: {
			// 	text: "生产报工统计",
			// 	subtext: '工序明细'
			// },
			color: ["#5B8FF9", "#5AD8A6", "#F6BD16", "#E8684A", "#6DC8EC", "#9270CA", "#FF9D4D", "#269A99", "#FF99C3"],
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'none'        // 默认为直线，可选为：'line' | 'shadow' | 'none'
				},
			},
			legend: {
				data: legendData,
				x: 20,
				y: 10
			},
			toolbox: {
				show: false,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			calculable: true,
			grid: {
				x: 100,
				y: 50,
			},
			xAxis: [
				{
					type: 'value',
					axisLabel: {   // x坐标轴数据显示
						formatter: function (params) {
							// console.log(params, 'params');
							return getDayByTime(params)
							// return params
						}
					},
				}
			],
			yAxis: [
				{
					type: 'category',
					data: yAxisData,
					axisLabel: {   // y坐标轴数据显示
						formatter: function (params) {
							// console.log(params, 'params');
							return params
						}
					},
				}
			],
			series: seriesData
		};

		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	};


	render() {
		const { iconSource, searchItem } = this.props

		return (
			<div>
				<PageHeader
					style={{ padding: '4px 24px' }}
					title={<div style={{ display: 'flex' }}>
						<div>生产报工统计</div>&emsp;&emsp;
						<div style={{ border: '1px solid #1890ff', padding: '0px 10px', color: '#1890ff', borderRadius: 5, fontWeight: 'normal', fontSize: 15 }}>批号日期范围：
							<span style={{ fontWeight: 'bold' }}>{moment(searchItem.startTime).format('YYYY-MM-DD') + ' ~ ' + moment(searchItem.endTime).format('YYYY-MM-DD')}</span>
						</div>
					</div>}
				// extra={[<div style={{ border: '1px solid #1890ff', padding: '5px 10px', color: '#1890ff', borderRadius: 5 }}>批号日期范围：<span style={{ fontWeight: 'bold' }}>{moment(searchItem.startTime).format('YYYY-MM-DD') + ' ~ ' + moment(searchItem.endTime).format('YYYY-MM-DD')}</span></div>]}
				>
					工序明细
				</PageHeader>
				<div id='myChart' style={{ width: '100%', height: 500 }}></div>
			</div>
		);
	}
}
export default Form.create()(withRouter(ReportProductionStatistics_details));